import React from 'react'
import { connect } from 'react-redux'
import { actions } from './_index'
import { getUrl } from './_store/action'
import ReactPullLoad, { STATS } from "react-pullload";
import "./ReactPullLoad.css";
class Url extends React.Component {
    constructor() {
        super()
        this.state = {
            ajaxcfg: {
                url: '/home/mediareports',
                cfg: {
                    page_number: '1', page_size: '10'
                },
                Headers: {}
            },
            data: [],
            page: 0,
            hasMore: true,
            action: STATS.init,
        }
    }
    getPddFn(prevData) {
        const { getPddFn } = this.props;
        const { ajaxcfg, page } = this.state;
        // 第几次请求
        ajaxcfg.cfg.page_number = page
        getPddFn('启动', ajaxcfg, prevData)
    }
    componentDidMount() {
        // 挂载成功 执行 第一次请求 prevData为空数组
        this.getPddFn([])
        // 不能刚挂载就获取/赋值数据,因为现在还没有
        const { url } = this.props
        console.log(url)
        // this.setState({
        //     data:[url.action]
        // })
        // console.log(this.state.data)
    }
    // init(){
    //     Unit.getApi2('/home/mediareports',{
    //         page_number: '1',
    //         page_size:'10'
    //     },{}).then((res)=>{
    //         console.log(res.data)
    //     })
    // }
    // componentDidMount(){
    //     this.init()
    // }
    handleAction = action => {
        // console.info(action, this.state.action, action === this.state.action);
        //new action must do not equel to old action
        if (action === this.state.action) {
            return false;
        }

        if (action === STATS.refreshing) {
            //刷新
            this.handRefreshing();
        } else if (action === STATS.loading) {
            //加载更多
            this.handLoadMore();
        } else {
            //DO NOT modify below code
            this.setState({
                action: action
            });
        }
    };
    handRefreshing = () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }

        setTimeout(() => {
            //refreshing complete
            this.setState({
                hasMore: true,
                action: STATS.refreshed,
                index: 6
            });
            console.log('下拉')
        }, 3000);

        this.setState({
            action: STATS.refreshing
        });
    };
    handLoadMore = () => {
        const { down } = this.props;
        if (STATS.loading === this.state.action) {
            return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
            return;
        }

        setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                    action: STATS.reset,
                    hasMore: false
                });
            } else {
                this.setState({
                    // data: [...this.state.data, cData[0], cData[0]],
                    action: STATS.reset,
                    index: this.state.index - 1
                });
            }
            console.log('加载更多')
            this.list()
            // this.setState((state, props) => {
            //     page: state.page++
            // })
            // this.getPddFn(this.state.page, down.pddApi.data)
        }, 3000);

        this.setState({
            action: STATS.loading
        });
    };

    list() {
        const { url } = this.props
        //不能在挂载里面直接获取,url是个空数组
        const datas = [...url.action.data.data]
        this.setState({
            data: [...datas]
        })
        console.log(url.action.pageData)
        this.setState({
            page: ++this.state.page
        })
        console.log(this.state.data, this.state.page)
        this.getPddFn()

    }
    render() {
        const { hasMore } = this.state;
        return (
            <>
                <div>fixed header</div>
                <ReactPullLoad
                    downEnough={150}
                    action={this.state.action}
                    handleAction={this.handleAction}
                    hasMore={hasMore}
                    style={{ paddingTop: 50 }}
                    distanceBottom={1000}
                >
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <div>123</div>
                    <ul>
                        {
                            this.state.data.map((item, index) => {
                                return <li key={index}>
                                    {index + 1}--{item.main_title}
                                </li>
                            })
                        }
                    </ul>
                    <button onClick={() => this.list()}>点击</button>
                </ReactPullLoad>
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        url: state.url
    }
    // 这里的url来自于store/store.js文件里导入的_index.js文件
}
const mapDispatchToProps = (dispatch, ownProps) => {
    //这才是来自action里的
    return {
        // getPddFn是index定义的
        getPddFn: (text, ajaxcfg, prevData) => {
            dispatch(actions.getFn(
                text,
                ajaxcfg,
                dispatch,
                prevData
            ))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Url)